<template>
  <div class="videomain">
      <div class="loading" v-if="loading">
      Loading...
    </div>
    <h1  v-if="learn">    learning </h1>
    <div v-if="error" class="error">
      {{ error }}
    </div>

    <slot name="title"></slot>
    <img src="../assets/xxjhbanner.jpg" width="100%" alt="">
    <!-- <swiper :list="demo01_list" v&#45;model="demo01_index" @on&#45;index&#45;change="demo01_onIndexChange"></swiper> -->
    <flexbox :gutter="0"  wrap="wrap"  >
      <!-- <flexbox&#45;item  :span="1/4"  warp="wrap" v&#45;for="a in querylabel"> -->
      <!--   <img class="tag&#45;cover" v&#45;if="querylabel!== 3" :src="loadImage(a.id)" alt=""> -->
      <!--   <h5 class="tag&#45;title">{{a.name}}</h5> -->
      <!-- </flexbox&#45;item> -->
    </flexbox>
    <!-- <divider>优选好课</divider> -->
    <!-- <flexbox :gutter="0"     v&#45;if="querygroup.body" wrap="wrap"> -->

   <!--    <flexbox&#45;item   v&#45;for="i in querygroup.body.knowledgeGroupList":span="1/2" :order="1"> -->
   <!--      <!&#45;&#45; <p v&#38;#45;for="m in i.children"><span>{{m}}</span></p> &#45;&#45;> -->
   <!--          <card @click.native="goDetail(i.id)" > -->
   <!--     <img slot="header" :src="i.cover" style="width:100%;display:block;"> -->
   <!--     <div slot="content" class="card&#45;padding"> -->
   <!--       <p style="color:#999;font&#45;size:12px;">{{i.title}}</p> -->
   <!--       <p style="font&#45;size:14px;line&#45;height:1.2;">{{i.intro}}</p> -->
   <!--     </div> -->
   <!-- </card> -->
   <!--    </flexbox&#45;item> -->
      <!-- <flexbox&#45;item :order="&#45;99"><div class="flex&#45;demo">5</div></flexbox&#45;item> -->
    <!-- </flexbox> -->

  </div>
</template>
<style lang="less" >
.tag-cover {
  width: 50%;
  height: 50%;
    text-align:center;
      margin:0 25%;
}
.tc{ text-align: center;}
.tag-title {.tc}
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';

.videomain 	{

}
</style>
  <script>
import { Grid, GridItem, GroupTitle,  Flexbox,FlexboxItem, Card, Divider, Swiper, SwiperItem, XButton } from 'vux'

const baseList = [{
  url: 'javascript:',
  img: '../assets/xxjhbanner.jpg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: '../assets/xxjhbanner.jpg',
  title: '送你一辆车'
}, {
  url: 'javascript:',
  img: '../assets/xxjhbanner.jpg',
  title: '送你一次旅行'
}]
export default {
  props:['abc','learned'],
  data () {
    return {
        loading: false,
      learn: false,
            post: null,
            error: null,
    demo01_list: baseList,
      demo01_index: 0,
    knowledge:false,
    isActive:false,
     knowledge_label:{
       actionName:"QueryKnowledgeTag",
       url: 'baseapi',
       postData: {
      "treeView":true
       }
     },
     knowledge_group:{
       actionName:"QueryKnowledgeGroup",
       url: 'baseapi',
       postData: {
    // 课程组ID（为空时查询全部） // "knowledg__eGroupId":"36ada1d166474abeb908f9fcbc051dd2", // 课程分类ID（为空时查询全部） // "classifyId":"e1dcb41fe9344eaba73af8bf9c6f5ace", // 课程级别ID（为空时查询全部） // "gradeId":"c9f6de99c0944a07b695a578d4cbc449", //是否包含视频课程 (为空时查询全部) // “haveVideo”:”true”, //标签ID (为空时查询全部，多个以逗号隔开)
          "tagIds":"YXHK" ,
           //页数(可为空)
          "pageNo":1,
         //页面显示条数(可为空)，与页数一起使用
          "pageSize":4

       }
     }
    }
  },
  created() {
    // this.onChange()
    // this.onChange2()
    // alert(111)
       this.$store.commit('restful_api',this.knowledge_label)
   setTimeout(function () {
     this.$store.commit('restful_api',this.knowledge_group)

     // alert(3)
   }.bind(this),1000 );
  },
  // directives: {
  //   TransferDom
  // },
  components: {
    Grid, GridItem, GroupTitle,  Flexbox, FlexboxItem, Card, Divider, Swiper, SwiperItem,XButton
  },
  methods: {
      goDetail(s) {
        var x = {
               actionName:"QueryKnowledgeGroup",
               url: 'baseapi',
               postData: {
            // 课程组ID（为空时查询全部）
                  // "knowledg__eGroupId":"36ada1d166474abeb908f9fcbc051dd2",
                  // 课程分类ID（为空时查询全部）
                  // "classifyId":"e1dcb41fe9344eaba73af8bf9c6f5ace",
                  // 课程级别ID（为空时查询全部）
                  // "gradeId":"c9f6de99c0944a07b695a578d4cbc449",
                   //是否包含视频课程 (为空时查询全部)
                  // “haveVideo”:”true”,
                 //标签ID (为空时查询全部，多个以逗号隔开)
                  // "tagIds":"YXHK" ,
                   //页数(可为空)
                  // "pageNo":1,
                 //页面显示条数(可为空)，与页数一起使用
                  // "pageSize":4
                 knowledgeGroupId:s
               }
        }
        this.$store.commit('restful_api',x)
        this.$router.push('/Vclassdetail')
      },
      loadImage (imgName) {
       // console.info(this.querylabel);
        if(imgName == undefined || imgName == 22){
          // alert(33)
          return require('../assets/@2x.png')
        }
          return require('../assets/' + imgName + '.png')
          } ,
    onChange2(){
       this.$store.commit('restful_api',this.knowledge_group)
    },
    onChange(){
       this.$store.commit('restful_api',this.knowledge_label)
    },

    demo01_onIndexChange (index) {
      this.demo01_index = index
    }
  },
  beforeDestory () {

  },
  watch: {
    // if (path=='/videomain'){
    // console.log('router is videomain')
    // }
  },
  computed: { mypropppp () {
      return this.abc
    },
    singlegroup () {
      return this.$store.getters.all_singlegroup
    },
    mygroup(){
      return this.$store.getters.all_ngroup
    },
    mylabel(){
      return this.$store.getters.all_nlabel
    },
    querylabel(){
      // return 33
      if(this.mylabel)
          {
            var y = []
            let x =  this.$store.getters.all_nlabel.body.tagList
            x.map(function(a,b){
              if (a.id == "SPXT"){
                console.info(a,a.id);
             y = a.children
              }
            })
          }
      return y

      }
   ,
    querygroup(){
return this.$store.getters.all_restful_QueryKnowledgeGroup
  }
  } ,
  mounted () {
     this.$nextTick(function(){
        console.log("QueryKnowledgeTag")
  Event.listen("queryknowledge",(e) =>{
         this.$vux.alert.show({
          title: '查询中',
          content: this.$t(e),
          onShow () {
      console.log('Plugin: I\'m showing')
          },
          onHide () {
      console.log('Plugin: I\'m hiding  now')
          }
      })

  })
     })
     this.handler = () => {
       if(this.path ==='/VideoClass') {
        console.log("videomain")
         alert(38438)
         this.learn = true
       }
     }
  }
}
</script>

